<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>写文章</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :model="articleForm" ref="articleFormRef" label-width="80px">
        <el-form-item label="标题" required="" prop="title">
          <el-input v-model="articleForm.title" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="描述" required prop="describe">
          <el-input type="textarea" style="width: 500px;" v-model="articleForm.describe" :autosize="{ minRows: 3, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="标签" required prop="tags">
          <el-input v-model="articleForm.tags" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="内容" required prop="content">
          <el-input type="textarea" style="height: 500px;" v-model="articleForm.content" :autosize="{ minRows: 3, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="图片" required prop="thumbnail">
          <el-upload class="upload-demo" accept="image/*" :headers="uploadParams.uploadHeaders" :data="uploadParams.uploadData"
            :action="uploadParams.uploadFileUrl" :on-success="uploadSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <div v-if="articleForm.thumbnail_path != ''" style="height: 150px;width: 300px;margin-left: 100px;margin-bottom: 20px;">
          <el-image style="height: 100%;" :src="articleForm.thumbnail_path" fit="fill"></el-image>
        </div>
        <el-form-item label="状态">
          <el-switch v-model="articleForm.status"></el-switch>
        </el-form-item>
        <el-form-item label="显示">
          <el-checkbox v-model="articleForm.is_top">置顶</el-checkbox>
          <el-checkbox v-model="articleForm.is_hot">热门</el-checkbox>
          <el-checkbox v-model="articleForm.is_recommend">推荐</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateOrCreateArticleForm">保存</el-button>
          <el-button v-if="operate === 'add'" type="primary" @click="resetArticleForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import {
    getUploadParamsApi,
    _updateOrCreateArticleApi,
    _getArticleDetailApi
  } from '../request/api.js'
  export default {
    data() {
      return {
        articleForm: {
          title: '',
          tags: '',
          content: '',
          describe: '',
          status: true,
          thumbnail: 33,
          thumbnail_path: '',
          is_top: false,
          is_hot: false,
          is_recommend: false
        },
        operate: 'add'
      }
    },
    created() {
      // 获取文件上传的参数配置
      this.uploadParams = getUploadParamsApi('article')
      // 判断是create or update
      const articleId = this.$route.query.articleId
      console.log(articleId)
      if (articleId !== 'add') {
        this.operate = 'edit'
        this.getArticleData(articleId)
      }
    },
    methods: {
      async getArticleData(articleId) {
        // 获取详情
        const res = await _getArticleDetailApi(articleId)
        console.log(res)
        if (res.status === 200 && res.data.status) {
          this.articleForm = res.data.data
          this.operate = 'edit'
        }
      },
      async updateOrCreateArticleForm() {
        this.$refs.articleFormRef.validate(async valid => {
          console.log(valid)
          if (valid) {
            const {
              data: res
            } = await _updateOrCreateArticleApi(this.articleForm, this.operate)
            console.log(res)
          }
        })
      },
      // 文件上传成功回调
      uploadSuccess(response) {
        if (response.status) {
          // 保存id 和显示的图片地址
          this.articleForm.thumbnail = response.data.id
          this.articleForm.thumbnail_path = response.data.file_path
        }
      },
      // 重置表单
      resetArticleForm() {
        this.$refs.articleFormRef.resetFields()
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    align-items: center;
    text-align: center;
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  .el-textarea__inner {
    height: 100% !important;
  }
</style>
